<template>
  <div id="menu">
      <div class="event1">
        <Menu mode="horizontal" :theme="theme1" active-name="1">
            <MenuItem name="1"><Icon type="ios-paper"></Icon>内容管理</MenuItem>
            <MenuItem name="2"><Icon type="ios-people"></Icon>用户管理</MenuItem>
            <Submenu name="3"><template slot="title"><Icon type="stats-bars"></Icon>统计分析</template>
                <MenuGroup title="使用">
                    <MenuItem name="3-1">新增和启动</MenuItem>
                    <MenuItem name="3-2">活跃分析</MenuItem>
                    <MenuItem name="3-3">时段分析</MenuItem>
                </MenuGroup>
                <MenuGroup title="留存">
                    <MenuItem name="3-4">用户留存</MenuItem>
                    <MenuItem name="3-5">流失用户</MenuItem>
                </MenuGroup>
            </Submenu>
            <MenuItem name="4"><Icon type="settings"></Icon>综合设置 </MenuItem>
        </Menu><br>
        <p>Change theme</p>
        <RadioGroup v-model="theme1">
            <Radio label="light"></Radio>
            <Radio label="dark"></Radio>
            <Radio label="primary"></Radio>
        </RadioGroup>
      </div>


      <div>
        <Row>
            <Col span="8">
                <Menu :theme="theme2">
                    <Submenu name="1">
                        <template slot="title"><Icon type="ios-paper"></Icon>内容管理</template>
                        <MenuItem name="1-1">文章管理</MenuItem>
                        <MenuItem name="1-2">评论管理</MenuItem>
                        <MenuItem name="1-3">举报管理</MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                        <Icon type="ios-people"></Icon>用户管理</template>
                        <MenuItem name="2-1">新增用户</MenuItem>
                        <MenuItem name="2-2">活跃用户</MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title"><Icon type="stats-bars"></Icon>统计分析</template>
                        <MenuGroup title="使用">
                            <MenuItem name="3-1">新增和启动</MenuItem>
                            <MenuItem name="3-2">活跃分析</MenuItem>
                            <MenuItem name="3-3">时段分析</MenuItem>
                        </MenuGroup>
                        <MenuGroup title="留存">
                            <MenuItem name="3-4">用户留存</MenuItem>
                            <MenuItem name="3-5">流失用户</MenuItem>
                        </MenuGroup>
                    </Submenu>
                </Menu>
            </Col>
            <Col span="8">
                <Menu :theme="theme2" active-name="1-2" :open-names="['1']">
                    <Submenu name="1">
                        <template slot="title"><Icon type="ios-paper"></Icon>内容管理</template>
                        <MenuItem name="1-1">文章管理</MenuItem>
                        <MenuItem name="1-2">评论管理</MenuItem>
                        <MenuItem name="1-3">举报管理</MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title"><Icon type="ios-people"></Icon>用户管理</template>
                        <MenuItem name="2-1">新增用户</MenuItem>
                        <MenuItem name="2-2">活跃用户</MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title"><Icon type="stats-bars"></Icon>统计分析 </template>
                        <MenuGroup title="使用">
                            <MenuItem name="3-1">新增和启动</MenuItem>
                            <MenuItem name="3-2">活跃分析</MenuItem>
                            <MenuItem name="3-3">时段分析</MenuItem>
                        </MenuGroup>
                        <MenuGroup title="留存">
                            <MenuItem name="3-4">用户留存</MenuItem>
                            <MenuItem name="3-5">流失用户</MenuItem>
                        </MenuGroup>
                    </Submenu>
                </Menu>
            </Col>
            <Col span="8">
                <Menu :theme="theme2" :open-names="['1']" accordion>
                    <Submenu name="1">
                        <template slot="title"><Icon type="ios-paper"></Icon>内容管理</template>
                        <MenuItem name="1-1">文章管理</MenuItem>
                        <MenuItem name="1-2">评论管理</MenuItem>
                        <MenuItem name="1-3">举报管理</MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title"><Icon type="ios-people"></Icon>用户管理</template>
                        <MenuItem name="2-1">新增用户</MenuItem>
                        <MenuItem name="2-2">活跃用户</MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title"><Icon type="stats-bars"></Icon>统计分析</template>
                        <MenuGroup title="使用">
                            <MenuItem name="3-1">新增和启动</MenuItem>
                            <MenuItem name="3-2">活跃分析</MenuItem>
                            <MenuItem name="3-3">时段分析</MenuItem>
                        </MenuGroup>
                        <MenuGroup title="留存">
                            <MenuItem name="3-4">用户留存</MenuItem>
                            <MenuItem name="3-5">流失用户</MenuItem>
                        </MenuGroup>
                    </Submenu>
                </Menu>
            </Col>
        </Row><br>
        <p>Change theme</p>
        <RadioGroup v-model="theme2">
            <Radio label="light"></Radio>
            <Radio label="dark"></Radio>
        </RadioGroup>
    </div>  
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme1: "light",
      theme2: 'light'
    };
  }
};
</script>

<style lang="less" scoped>
#menu {
  width: 900px;
  margin: 0 auto;
  .event1 {
    width: 800px;
    margin-bottom:50px;
  }
  .event2{
    width: 800px;
    margin-bottom:100px;
  }
}
</style>


